---
title: "Install Tailwind CSS with Gatsby"
description: "Setting up Tailwind CSS in a Gatsby project."
tool: Gatsby
---

```preval installation
reference:
  name: Gatsby CLI
  link: https://www.gatsbyjs.com/docs/quick-start/#use-the-gatsby-cli
script: gatsby new 
```

---

```preval setup
dependencies:
  - gatsby-plugin-postcss
```

```preval configuration
purge: 
  - ./src/**/*.{js,jsx,ts,tsx}
```

### Enable gatsby-plugin-postcss 

In your `gatsby-config.js` file, enable the [postcss plugin](https://www.gatsbyjs.com/plugins/gatsby-plugin-postcss/).

```diff-js
  // gatsby-config.js
  module.exports = {
    /* Your site config here */
-   plugins: [],
+   plugins: ['gatsby-plugin-postcss'],
  }
```

```preval include
create: true
file: ./src/styles/global.css
```

Finally, create a `./gatsby-browser.js` file at the root of your project if it doesn't already exist, and import your CSS file:

```diff-js
  // ./gatsby-browser.js
+ import './src/styles/global.css';
```

Read [the Gatsby documentation on using global styles](https://www.gatsbyjs.com/docs/recipes/styling-css/#using-global-css-files-without-a-layout-component) to learn more about working with global CSS files in Gatsby.

---

```preval finish
scripts:
  - gatsby develop 
```

